
import { useState } from "react";
import { Dialog, DialogContent } from "@/components/ui/dialog";
import { Card, CardContent, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import { 
  FileText, 
  Video, 
  Image, 
  BookOpen, 
  HelpCircle, 
  CheckSquare, 
  BarChart,
  Plus,
  Trash2,
  Settings,
  Save,
  Eye,
  Sparkles,
  Search,
  Download,
  Share,
  Zap,
  ArrowRight,
  Clock,
  Brain,
  Target,
  ChevronDown,
  ChevronRight,
  Maximize,
  Minimize
} from "lucide-react";
import { WorkflowCanvas } from "./workflow/WorkflowCanvas";
import flow1 from '@/../template/图片模板/教育的图标.jpg';
import flow2 from '@/../template/图片模板/创新研究图标.jpg';
import flow3 from '@/../template/图片模板/化学实验概念设计.jpg';
import flow4 from '@/../template/图片模板/独立彩色图案砖.jpg';

interface CourseComponent {
  id: string;
  type: string;
  title: string;
  icon: React.ReactNode;
  description: string;
  isTemplate?: boolean;
}

interface CanvasItem {
  id: string;
  type: string;
  title: string;
  x: number;
  y: number;
  width: number;
  height: number;
  connections?: string[];
}

interface FlowConnection {
  from: string;
  to: string;
  label?: string;
}

const defaultComponents: CourseComponent[] = [
  {
    id: "text",
    type: "Text Content",
    title: "Text Module",
    icon: <FileText className="w-4 h-4" />,
    description: "Add text content, readings, or written materials"
  },
  {
    id: "video",
    type: "Video Content",
    title: "Video Module", 
    icon: <Video className="w-4 h-4" />,
    description: "Embed videos, lectures, or multimedia content"
  },
  {
    id: "image",
    type: "Image Content",
    title: "Image Module",
    icon: <Image className="w-4 h-4" />,
    description: "Add images, diagrams, or visual content"
  },
  {
    id: "reading",
    type: "Reading Assignment",
    title: "Reading Module",
    icon: <BookOpen className="w-4 h-4" />,
    description: "Assign readings or research materials"
  },
  {
    id: "quiz",
    type: "Quiz Assessment",
    title: "Quiz Module",
    icon: <HelpCircle className="w-4 h-4" />,
    description: "Create quizzes and knowledge checks"
  },
  {
    id: "assignment",
    type: "Assignment",
    title: "Assignment Module",
    icon: <CheckSquare className="w-4 h-4" />,
    description: "Create assignments and projects"
  }
];

const templateLibraryComponents: CourseComponent[] = [
  {
    id: "rubric-generator",
    type: "Rubric Generator",
    title: "Assessment Rubric",
    icon: <BarChart className="w-4 h-4" />,
    description: "Pre-built rubric templates with customizable criteria",
    isTemplate: true
  },
  {
    id: "video-questions",
    type: "Video Questions",
    title: "YouTube Video Quiz",
    icon: <Video className="w-4 h-4" />,
    description: "Interactive video comprehension questions",
    isTemplate: true
  },
  {
    id: "lesson-plan",
    type: "Lesson Plan",
    title: "Structured Lesson Plan",
    icon: <FileText className="w-4 h-4" />,
    description: "Complete lesson plan template with objectives",
    isTemplate: true
  },
  {
    id: "worksheet",
    type: "Worksheet",
    title: "Practice Worksheet",
    icon: <CheckSquare className="w-4 h-4" />,
    description: "Customizable practice worksheets",
    isTemplate: true
  }
];

export function SmartCoursewareAssembly() {
  const [canvasItems, setCanvasItems] = useState<CanvasItem[]>([]);
  const [connections, setConnections] = useState<FlowConnection[]>([]);
  const [selectedItem, setSelectedItem] = useState<string | null>(null);
  const [courseName, setCourseName] = useState("New Course");
  const [courseDescription, setCourseDescription] = useState("");
  const [searchTerm, setSearchTerm] = useState("");
  const [showWizard, setShowWizard] = useState(false);
  const [wizardStep, setWizardStep] = useState(1);
  const [isFullScreen, setIsFullScreen] = useState(false);
  const [isTemplateLibraryExpanded, setIsTemplateLibraryExpanded] = useState(false);
  const [isDrawingConnection, setIsDrawingConnection] = useState(false);
  const [connectionStart, setConnectionStart] = useState<string | null>(null);
  const [wizardData, setWizardData] = useState({
    objective: "",
    lessonType: "",
    duration: "",
    gradeLevel: ""
  });
  const [open, setOpen] = useState(false);
  const cardData = [
    { title: "5E 教学法", img: "/pic/1.png", desc: "Engage（引入）→ Explore（探索）→ Explain（解释）→ Elaborate（拓展）→ Evaluate（评价）" },
    { title: "5A 任务驱动", img: "/pic/2.png", desc: "Assignment（任务布置）→ Audiovisual Aid（视听辅助）→ Activity（活动实施）→ Assessment（评价）→ Assignment Extension（任务延伸）" },
    { title: "BOPPPS 教学法", img: "/pic/3.png", desc: "Bridge-in（导入）→ Objective（目标）→ Pre-assessment（前测）→ Participatory Learning（参与式学习）→ Post-assessment（后测）→ Summary（总结）" },
    { title: "PBL 项目式学习", img: "/pic/4.png", desc: "Project Launch（项目启动）→ Inquiry & Research（探究研究）→ Product Creation（成果制作）→ Presentation（展示分享）→ Reflection（反思提升）" },
  ];
  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="space-y-4">
        <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
          <h2 className="text-2xl font-bold text-gray-900">Smart Courseware Assembly</h2>
          <div className="flex gap-2 flex-wrap">
            <Button variant="outline" size="sm">
              <Eye className="w-4 h-4 mr-1" />
              Preview
            </Button>
            <Button size="sm">
              <Save className="w-4 h-4 mr-1" />
              Save Course
            </Button>
          </div>
        </div>
        
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <Label htmlFor="courseName">Course Name</Label>
            <Input
              id="courseName"
              value={courseName}
              onChange={(e) => setCourseName(e.target.value)}
              placeholder="Enter course name"
            />
          </div>
          <div>
            <Label htmlFor="courseDescription">Course Description</Label>
            <Textarea
              id="courseDescription"
              value={courseDescription}
              onChange={(e) => setCourseDescription(e.target.value)}
              placeholder="Enter course description"
              rows={2}
            />
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mt-4">
        {cardData.map((card, idx) => (
          <Card key={idx} className="cursor-pointer hover:shadow-lg transition" onClick={() => setOpen(true)}>
            <CardContent className="flex flex-col items-center justify-center py-6">
              <img src={card.img} alt={card.title} className="w-48 h-36 object-cover rounded mb-2 border" />
              <CardTitle className="mb-1 text-base font-bold text-indigo-700">{card.title}</CardTitle>
              <div className="text-gray-500 text-xs text-center">{card.desc}</div>
            </CardContent>
          </Card>
        ))}
      </div>
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent style={{ width: "100vw", height: "100vh", maxWidth: '100vw', maxHeight: '100vh', padding: 0, margin: 0, borderRadius: 0 }}>
          <WorkflowCanvas />
        </DialogContent>
      </Dialog>
    </div>
  );
}
